<template>
	<div>
	  <div v-if="chenload">
			<div>
				<div style="padding-bottom: 1.08rem;overflow: hidden;">
					<div style="background: #fff">
						<img :src="img+arr.thumb" alt="" class="img">
						<!--课程介绍-->
						<div class="intruclass" >
							<div class="intru">
								<div :class="arr.is_promotion == 1||arr.is_promotion == '1'?'m1':'m1name'">
									<p>{{arr.name}}</p>
									<p class="price">
										<span>{{arr.sales}}人已加入</span>
										<span v-if="arr.price==0||arr.price=='0'||arr.price==0.00||arr.price=='0.00'" class="a1">免费</span>
										<span v-else class="a">￥{{arr.price}}</span>
										<!-- <span v-if="arr.price !=0">￥{{arr.xprice}}</span> -->
									</p>
							    </div>
								<div class="dianhua" v-if="arr.is_promotion == 1||arr.is_promotion == '1'"  @click="tuiguang()">
										<img src="../../../src/assets/img/tui.png" alt="">
										<p>推广</p>
								</div>
							</div>
							<div v-if="arr.type==1||arr.type=='1'" class="zbotime">
								<div v-if="arr.live_status!=3||arr.live_status!='3'" >
									<div v-if="arr.live_status==2||arr.live_status=='2'">
										<div class="time">
											<div class="timecolor">正在直播</div>
											<div class="timekai">{{arr.begin_time}}开播</div>
										</div>
									</div>
									<div v-else>
										<div class="time">
											<div>
												<span>距直播</span>
												<span class="timered" v-if="h!=0||h!='0'">{{h}}</span> <span v-if="h!=0||h!='0'">:</span>
												<span class="timered">{{m}}</span> :
												<span class="timered">{{s}}</span> :
												<span class="timered">{{t}}</span>
											</div>
											<div class="timekai">{{arr.begin_time}}开播</div>
										</div>
									</div>
								</div>
								<div v-else class="zbotime">
								  <div class="time">
									  <div style="color: #C2C9D3;">直播结束</div>
									  <div class="timekai">{{arr.begin_time}}开播</div>
								  </div>
								</div>
							</div>
						</div>
						
						
						
						
						
						<!--带头像的-->
						<div class="d" @click="te()">
							<div class="msg">
								<img :src="img+arr.avatar" alt="">
								<div>
									<p>主讲人：{{arr.tname}}</p>
									<p>已被{{arr.follow}}人关注</p>
								</div>
							</div>
							<button class="btoGray" v-if="arr.teacher_collection==1||arr.teacher_collection=='1'" @click.stop="guan()">已关注</button>
							<button class="btoBlue" v-else @click.stop="guan()">关注</button>
						</div>
					</div>
					
					<div v-if="arr.notice" class="chenline-pay"></div>

					<!--活动-->
					<van-notice-bar class="huo1" :text="arr.notice" @click="huo1()" v-if="arr.notice"/>
					
					<div class="chenline-pay"></div>
				 <!--课程简介-->
				 <div v-if="arr.type==2||arr.type=='2'">
					 
					<van-tabs v-model="active" :line-width=60  swipeable color="#0287FF" title-active-color="#0287FF" title-inactive-color="#C2C9D3" style="margin-top: 0.2rem">
						<van-tab title="课程简介" >
							<div class="v">
									<div class="ht" >
										<div v-html="arr.description">

										</div>
									</div>
							</div>
							
							<div class="chenline-pay"></div>
							
							<!--相关视频-->
								<div style="margin-top: 0.2rem;" v-if="recommend.length>0">
									<div class="v">
										<span class="span1"></span>
										<span class="span2">相关视频</span>
											<div class="ya" v-for="(item,index) in recommend" @click="recom(item)">
												<img :src="img+item.thumb" alt="" class="img2">
												
												<div>
													<p>{{item.name}}</p>
													<p class="p1">
														<img src="../../../src/assets/img/ren.png" alt="" class="img1" style="width: 0.24rem;
							height: 0.2rem;
							vertical-align: baseline;">
														<span style="color: #C2C9D3;">{{item.sales}}人已加入</span>
														<span v-if="item.price==0||item.price=='0'||item.price==0.00||item.price=='0.00'" class="a1">免费</span>
														<span v-else class="a">￥{{item.price}}</span>
														<span v-if="item.price !=0">￥{{item.xprice}}</span>
													</p>
												</div>
											</div>
									</div>
								</div>
						</van-tab>
						
						<van-tab title="评价">
							<div class="r">
								<div id="app" style="overflow: auto;">
									<mt-loadmore :bottom-method="loadBottom"  :bottom-all-loaded="allLoaded" ref="loadmoredetail">
										<div>
											<div class="doctor" v-for="(item,index) in pinglun">
												<img v-if="item.avatar!=''" :src="item.avatar" alt="" class="docImg">
												<img v-else :src="avatarimg" alt="" class="docImg">
												<div class="content">
													<p>{{item.nickname}}<span class="commitmain" v-if="item.flag==1||item.flag=='1'">(我)</span></p>
													<p>{{item.addtime}}</p>
													<!-- <p>{{item.content}}</p> -->
													<p>{{item.content | base64Decode}}</p>
													<p @click="praisemain(item.id,item.is_praise,index,item.praise)">
														<img src="../../../src/assets/img/buy/zan.png" alt="" v-if="item.is_praise == 1||item.is_praise == '1'">
														<img src="../../../src/assets/img/buy/grayzan.png" alt="" v-if="item.is_praise == 0||item.is_praise == '0'">
														<span :class="item.is_praise == 1?'bluezan':'grayzan'">{{item.praise}}</span>
													</p>
												</div>
												<p style="width: 100%;height: 0.02rem;background: rgba(237,237,237,1);margin-top: 0.2rem;"></p>
											</div>
									  </div>
								 </mt-loadmore>
								</div>
								<!--评论-->
								<div v-if="fix&&arr.is_pay==1">
									<img src="../../../src/assets/img/kechengxiangqing/pinglun.png" alt=""  @click="pl()" class="goback" v-if="arr.is_comment == 0||arr.is_comment == '0'">
									<img src="../../../src/assets/img/shenpin.png" alt=""  @click="commitpl()" class="goback" v-else-if="arr.is_comment == 10||arr.is_comment == '10'">
								</div>
							</div>
							<div style="text-align: center;padding-top: 15%;padding-bottom: 10%;background: #fff" v-if="b">
								<img :src="imgSrc3" alt="" style="width: 2.8rem">
								<p style="width: 2rem;text-align: center;font-size: 0.24rem;color: #999;margin: auto;margin-top: 0.15rem">
									暂时还没有人评论，
									快抢沙发吧…
								</p>
								<div v-if="fix&&arr.is_pay==1">
								  <img src="../../../src/assets/img/kechengxiangqing/pinglun.png" alt=""  @click="pl()" class="goback" v-if="arr.is_comment == 0||arr.is_comment == '0'">
								  <img src="../../../src/assets/img/shenpin.png" alt=""  @click="commitpl()" class="goback" v-else-if="arr.is_comment == 10||arr.is_comment == '10'">
								</div>
							</div>
						</van-tab>
					</van-tabs>
				 </div>
				<div v-else>
					<div class="v">
						<span class="span1"></span>
						<span class="span2">课程简介</span>
						<div class="ht" v-html="arr.description">
					
						</div>
					</div>
				</div>

					<div class="fix">
						<div @click="collect()" v-if="arr.live_collection==0||arr.live_collection=='0'">
							<img src="../../../src/assets/img/shouye/xing.png" alt="">
							<p style="color: #C2C9D3;">收藏</p>
						</div>
						<div @click="collect()" v-else>
							<img src="../../../src/assets/img/shouye/yellowstar.png" alt="">
							<p style="color: #666666;">已收藏</p>
						</div>
						<div v-if="arr.is_pay == 0||arr.is_pay == '0'">
							<div v-if="arr.price==0||arr.price=='0'||arr.price==0.00||arr.price=='0.00'"></div>
							<div v-else>
								<div v-if="arr.live_status!=3||arr.live_status!='3'">
									<div @click="yaoqing()" v-if="arr.invite == 1||arr.invite == '1'">
										<img src="../../../src/assets/img/shouye/yaoqing.png" alt="">
										<p style="color: rgba(2,135,255,1);">邀请码</p>
									</div>
								</div>
								<div v-else>
									<div @click="zboend()" v-if="arr.invite == 1||arr.invite == '1'">
										<img src="../../../src/assets/img/flagcode.png" alt="">
										<p style="color: #C2C9D3;">邀请码</p>
									</div>
								</div>
							</div>
						</div>
						
						<div v-if="arr.is_pay == 0||arr.is_pay == '0'">
							<div v-if="arr.price==0||arr.price=='0'||arr.price==0.00||arr.price=='0.00'"></div>
							<div v-else>
								<div v-if="arr.live_status!=3||arr.live_status!='3'">
									<div @click="look()" v-if="arr.trysee!=1||arr.trysee!='1'">
										<img src="../../../src/assets/img/shouye/blueyan.png" alt="">
										<p style="color: rgba(2,135,255,1);">免费试看</p>
									</div>
									<div @click="look()" v-else>
										<img src="../../../src/assets/img/orderkan.png" alt="">
										<p style="color: #C2C9D3;">已试看</p>
									</div>
								</div>
								<div v-else>
									<div @click="zboend()">
										<img src="../../../src/assets/img/orderkan.png" alt="">
										<p style="color: #C2C9D3;">免费试看</p>
									</div>
								</div>
							</div>
						</div>
						
						<div v-if="arr.is_vip==1||arr.is_vip=='1'">
							<!-- <button@click="btn()">超级VIP免费观看</button> -->
							<div v-if="arr.live_status!=3||arr.live_status!='3'">
								<button @click="btn()">超级VIP免费观看</button>
							</div>
							<div v-else>
								<button @click="zboend()" style="background: #C2C9D3;color: #fff;">直播结束</button>
							</div>
						</div>
						<div v-else>
							<div v-if="arr.is_pay == 1||arr.is_pay == '1'">
								<!-- <button @click="btn()" v-if="arr.price==0||arr.price=='0'||arr.price==0.00||arr.price=='0.00'">
									免费观看
								</button>
								<button@click="btn()" v-else>立即观看</button> -->
								<div v-if="arr.live_status!=3||arr.live_status!='3'">
									<button @click="btn()" v-if="arr.price==0||arr.price=='0'||arr.price==0.00||arr.price=='0.00'">
										免费观看
									</button>
									<button @click="btn()" v-else>立即观看</button>
								</div>
								<div v-else>
									<button @click="zboend()" style="background: #C2C9D3;color: #fff;">直播结束</button>
								</div>
							</div>
							<div v-else>
								<div v-if="arr.live_status!=3||arr.live_status!='3'">
									<button @click="btn()" v-if="arr.price==0||arr.price=='0'||arr.price==0.00||arr.price=='0.00'">
										免费观看
									</button>
									<div  v-else>
                                             <button @click="btn()" v-if="arr.is_stop==0">￥{{arr.price}}支付观看</button>
										    <span class="button3"  v-if="arr.is_stop==1">人员已满</span>
									</div>
									
								</div>
								<div v-else>
									<button @click="zboend()" style="background: #C2C9D3;color: #fff;" v-if="arr.price==0||arr.price=='0'||arr.price==0.00||arr.price=='0.00'">
										直播结束
									</button>
									
									<button @click="btn()" v-else>￥{{arr.price}}支付观看</button>
								</div>
							</div>
						</div>
							
					</div>
				</div>
				
				<!--小七咨询-->
				<div class="shoewr-chen-popu">
					<div class='chen-conactive'>
						<div class="chen-contener-popu">
							<div class="chen-con-pic">
								<img :src="img+serviceinfo.qr_code" alt="">
							</div>
							<a class="chen-phone" @click="phoneclick(serviceinfo.tel)">
								<div class="chen-phone-pic">
									<img src="../../../src/assets/img/kechengxiangqing/zixun.png" alt="">
								</div>
								<span class="chen-tel">{{serviceinfo.tel}}</span>
							</a>
							<p class="chen-sever">
								客服随时为您提供服务</br>
								点击电话即刻咨询<span style="color: #FE9C2B;">(微信同号)</span></p>
						</div>
						<div class="close-chen">
							<img src="../../../src/assets/img/cha1.png" alt="" @click="un1()">
						</div>
					</div>
				</div>
				

				<!--课程公告-->
				<div class="shoewr-chenhou chen-showerhou">
					<div class="chen-contener">
						<p class="chen-title">课程公告</p>
						<p class="chen-text">{{arr.notice}}</p>
						<p class="chen-button" @click="huo2()">确定</p>
					</div>
				</div>
				


				<!--点击复制链接-->
				<mt-popup v-model="popupVisible3" popup-transition="popup-fade" position="bottom" style="width: 100%;height: 100%;background:rgba(0,0,0,.1);">
					<div style="position: relative;top: 15%;">
						<div style="width: 92%;height: 7.93rem;background: #fff;text-align: center;margin: auto;overflow: hidden;border-radius: 0.08rem">
							<p style="margin-top: 0.94rem">
								<img src="../../../src/assets/img/timg.jpg" alt="" style="width: 3.84rem;height: 3.84rem;">
							</p>
							<section class="form">
								<p class="url">{{url}}</p>
								<button v-clipboard:copy="url"
												v-clipboard:success="onCopy"
												v-clipboard:error="onError" class="fuzhi">
									点击复制链接
								</button>
							</section>
						</div>
					</div>
					<div style="text-align: center;margin-top: 2.3rem">
						<img src="../../../src/assets/img/cha1.png" alt="" style="width: 0.66rem;" @click="un2()">
					</div>
				</mt-popup>


				<!--首页图标-->
				<img src="../../../src/assets/img/goback.png" alt="" class="goback" v-if="active == 0&&fix == true" @click="goback()">
				<!--咨询图标-->
				<img src="../../../src/assets/img/detailkefu.png" alt=""  class="tuiguang" @click="dianhua()" v-if="active == 0&&fix == true">
        
				<!-- 评论审核弹窗 -->
				<div class="shoewr-chen">
					<div class="chen-contener">
						<p class="chen-text">您的评论正在审核中</p>
						<p class="chen-button" @click="chenclick()">确定</p>
					</div>
				</div>
				
				<!-- 邀请码 -->
				<div class="shoewr-free">
					<div class="chen-free">
						<p class="freetitle">请输入邀请码</p>
						<input type="number" oninput="if(value.length>4)value=value.slice(0,4)" v-model="freevalue" placeholder="请输入邀请码">
						<div class="chen-but">
							<p class="chen-but-no" @click="repeatclosefree()">取消</p>
							<p class="chen-but-yes" @click="repeatclickfree()">确认</p>
						</div>
					</div>
				</div>
				
				<!-- 登录弹窗 -->
				<div class="shoewr-chenhoupass">
					<div class="chen-contener chenpass">
						<p class="chen-title">提示</p>
						<p class="chen-text chen-textactive">您需要先登录?</p>
						<div class="chen-but">
							<p class="chen-but-no" @click="repeatclose()">取消</p>
							<p class="chen-but-yes chen-but-yesactive" @click="repeatclick()">去登录</p>
						</div>
					</div>
				</div>
				
				<!-- 登录弹窗 -->
				<div class="shoewr-chenhoupass1" v-if="number3==1||number3=='1'">
					<div class="chen-contener chenpass">
						<p class="chen-title">提示</p>
						<p class="chen-text chen-textactive">您需要先登录?</p>
						<div class="chen-but">
							<p class="chen-but-no" @click="repeatclose()">取消</p>
							<p class="chen-but-yes chen-but-yesactive" @click="repeatclick()">去登录</p>
						</div>
					</div>
				</div>
				
				<!-- 您已试看过该课程 -->
				<div class="shoewr-chenshi">
					<div class="chen-contener chen-textactiveshi">
						<p class="chen-title">提示</p>
						<p class="chen-text chen-textshi">您已试看过该课程</p>
						<p class="chen-button-shiyes" @click="shishare()">确定</p>
					</div>
				</div>
				
				
			</div>
			
			<!-- <a href='javascript:void(0);' id='downloadButton'>点击打开app</a> -->
		</div>
		<div class="loadmore" v-else>
          <img src="../../../src/assets/img/load.gif" alt="">
        </div>
	</div>
</template>

<script>
  import { MessageBox } from 'mint-ui';
    export default {
        name: "course",
      data(){
          return{
				t:'',
				h:'',
				m:'',
				s:'',
				imgSrc3:require('../../assets/img/kongbai.png'),
				number3:0,
				freevalue:'',
				allLoaded:false,
				avatarimg:this.$store.state.avatarimg,
				phoneurl:this.$store.state.phoneurl,
				loadzheng:false,
				noloadzheng:false,
				id:'',   //课程id
				chenload:false,
				active:0,
				img:this.$store.state.img,
				arr:[],
				recommend:[],
				// popupVisible:false,
				popupVisible1:false,
				popupVisible2:false,
				popupVisible3:false,
				popupVisible4:false,
				url:'https://www.csdn.net/gather_22/MtTaAg2sODk2Mi1ibG9n.html',
				top:'',
				fix:true,
				pinglun:[],
				b:false,
				tid:'',   //专题id
				pinfalse:false,
				page:'',
				size:'',
				loadfalse:false,
				page:1,
				codeclick:0,
				serviceinfo:'',
				// bottomAllLoaded:false,
          }
      },
      methods:{
		  zboend(){
			layer.open({
				content: '直播已结束，回放正在上传中，请耐心等待~',
				skin: 'msg',
				time: 2 //1秒后自动关闭
			});   
		  },
		  // 点击拨打电话
		  phoneclick(tel){
			  window.location.href = 'tel://'+tel+''
		  },
		shishare(){
			$('.shoewr-chenshi').fadeOut();
		},
		// 点击正在审核中的评论按钮
		commitpl(){
			$('.shoewr-chen').fadeIn();
		},
		// 点击确定
		chenclick(){
			$('.shoewr-chen').fadeOut();
			
		},
		repeatclosefree(){
			$('.shoewr-free').fadeOut();
		},
		pl(){
			this.$router.push({
				path:'/pl',
				query:{
					id:this.id,
					type:1
				}
			})
		},
        onCopy () {
          // this.popupVisible3 = false;
          this.popupVisible3 = false;
          this.$toast({
            message:'复制成功',
          });
        },
        onError () {
          // this.$message.error(this.$t('prompt.copyFail'))
        },
		tuiguang(){
			this.popupVisible3 = true;
		},
		// 课程公告
		huo1(){
			$('.shoewr-chenhou').fadeIn();
		},
				// 课程公告点击确定关闭
        huo2(){
			$('.shoewr-chenhou').fadeOut();
        },
		dianhua(){
			$('.shoewr-chen-popu').fadeIn();
		},
		// 试看
        look(){
          if (localStorage.getItem('token')){
			// 0未分享 10已分享未试看 1试看
            if (this.arr.trysee == 0||this.arr.trysee == '0'){
				// this.popupVisible4 = true;
				//    获取课程详情
				  this.axios.get(this.$store.state.url + 'LiveCourse/addTry',{
					params:{
					  id:this.id
					},
				  }).then(res=>{
						// console.log(res);
						var errcode = res.data.errcode;
						if(errcode==0||errcode=='0'){
							this.tapzbo();
						}else{
							this.$toast({
							  message:res.data.msg,
							});
						}
						
					})
            }else if(this.arr.trysee == 10||this.arr.trysee == '10'){
				this.tapzbo();
			}else {
              $('.shoewr-chenshi').fadeIn();
            }
          
          
          } else {
            this.nologin();
          }
        },
		tapzbo(){
			if (this.arr.type == 2||this.arr.type == '2'){
				this.$router.push({
					path:'/demand',
					query:{
						id:this.arr.id,
						y:'',
						type:1,   //课程
						try:1,
						zbo:0,
						cid:'',
						url:this.$route.fullPath
					}
				})
			} else {
				this.$router.push({
					path:'/demand',
					query:{
						id:this.arr.id,
						y:'',
						type:1,   //课程
						try:1,
						cid:'',
						zbo:1,
						url:this.$route.fullPath
					}
				})
			}
		},
        un1(){
          // this.popupVisible1 = false;
			$('.shoewr-chen-popu').fadeOut();
        },
        un2(){
          this.popupVisible3 = false;
        },
        un4(){
          this.popupVisible4 = false;
        },
        te(){
          this.$router.push({
            path:'/steach',
            query:{
              id:this.arr.teacher_id
            }
          })
        },
        goback(){
          this.$router.push({
            path:'/'
          })
        },
		// 点击确认
		repeatclickfree(){
			var that = this;
			if(that.freevalue==''){
				layer.open({
					content: '请输入邀请码',
					skin: 'msg',
					time: 2 //1秒后自动关闭
				});
			}else{
				 var data={
					 id:this.id,
					 code:that.freevalue
				 }
				 that.axios.post(that.$store.state.url + 'LiveCourse/checkCode',data).then(res=> {
					 if(res.data.errcode==0||res.data.errcode=='0'){
							$('.shoewr-free').fadeOut();
							layer.open({
								content: '邀请码正确',
								skin: 'msg',
								time: 2 //1秒后自动关闭
							});
							// console.log()
							if(that.codeclick==0||that.codeclick=='0'){
							    that.codeclick=1;
								setTimeout(function(){
									if (that.arr.type == 2||that.arr.type == '2'){
										 that.$router.push({
											 path:'/demand',
											 query:{
												 id:that.arr.id,
												 cid:'',
												 y:that.freevalue,
												 type:1,   //课程
												 zid:that.tid,
												 zbo:0,
												 url:that.$route.fullPath
											 }
										 })
									 } else {
										 that.$router.push({
											 path:'/demand',
											 query:{
												 id:that.arr.id,
												 cid:'',
												 y:that.freevalue,
												 type:1,   //课程
												 zid:that.tid,
												 zbo:1,
												 url:that.$route.fullPath
											 }
										 })
									}
								},500)
							}
						}else{
							layer.open({
								content: res.data.msg,
								skin: 'msg',
								time: 2 //1秒后自动关闭
							});
						}
					 })
			}
		},
          //邀请码
         yaoqing(){
           if (localStorage.getItem('token')){
				$('.shoewr-free').fadeIn();
           } else {
             this.nologin();
           }
         },
				 // 关注老师
        guan(){
			var b =localStorage.getItem('token');
			// console.log(this.$route.query.id)
			if(b){
				var that = this;
				// console.log(b)
				 that.axios.get(this.$store.state.url +'find/teacherColl',{
					 params:{
						 id:this.arr.teacher_id
					 }
				 }).then(res=>{
					 // console.log(res.data)
					 if(res.data.errcode==0||res.data.errcode=='0'){
						 var teacher_collection = this.arr.teacher_collection;
						if(teacher_collection==0||teacher_collection=='0'){
							that.$toast({
								message:'关注成功',
								position:'bottom'
							});
							this.arr.follow = this.arr.follow +1;
							this.arr.teacher_collection = 1
						}else{
							this.arr.follow = this.arr.follow - 1;
							that.$toast({
								message:'已取消关注',
								position:'bottom'
							});
							this.arr.teacher_collection = 0
						}
						// this.xq();
					 }else{
						 that.$toast({
							 message:res.data.msg,
							 position:'bottom'
						 });
					 }
				 })
			}else{
				this.nologin();
			}

        },
				// 收藏
        collect(){
          var a=localStorage.getItem('token') 
          if(a){
              this.axios.get(this.$store.state.url +'LiveCourse/collect',{
                params:{id:this.id}
              }).then(res=>{
            if(res.data.errcode==0||res.data.errcode=='0'){
              //  console.log(res.data.msg)  
             	var collect = this.arr.live_collection;
				 if(collect==0||collect=='0'){
						this.$toast({
							 message:'收藏成功',
							 position:'bottom'
						})
						this.arr.live_collection = 1;
				 }else{
					 this.$toast({
						 message:'取消收藏成功',
						 position:'bottom'
					 })
					 this.arr.live_collection = 0;
					}
				}else{
					 this.$toast({
						 message:res.data.msg,
						 position:'bottom'
					 })
				}
							
          })
          }else{
            this.nologin()  
          }
        },
        recom(item){
		  // console.log(item);
          this.$router.push({
            path:'/course',
            query:{
              cid:item.id,
            }
          })
        },
		// 评论点赞
		praisemain(id,is_praise,index,praise){
			// is_praise  是否为自己评论 1是 0 否
			var token = localStorage.getItem('token');
			if(token){
				var that = this;
				 that.axios.get(this.$store.state.url + 'Live/likeComment',{
					params:{
						id:id
					},
				}).then(res=>{
				 if (res.data.errcode == 0||res.data.errcode == '0'){
					 // this.arr = res.data.data
					 if(is_praise==0||is_praise=='0'){
						 that.$toast({
							 message:'点赞成功',
							 position:'bottom'
						 });
						 // console.log(that.ping)
						 that.pinglun[index].is_praise = 1
						 that.pinglun[index].praise = Number(that.pinglun[index].praise)+1
					 }else{
						 that.$toast({
							 message:'取消赞成功',
							 position:'bottom'
						 });
						 // console.log(that.ping)
						 that.pinglun[index].is_praise = 0
						 that.pinglun[index].praise = Number(that.pinglun[index].praise)-1
					 }
					 // that.ping(that.page,that.size);
				 }else{
					 that.$toast({
						 message:res.data.msg,
						 position:'bottom'
					 });
				 }
				})
			}else{
				this.nologin();
			}
		},
				
        btn(){
          if (localStorage.getItem('token')){
            if (this.arr.is_pay == 1 || this.arr.price == 0||this.arr.is_pay == '1' || this.arr.price == '0'||this.arr.price == '0.00'||this.arr.price == 0.00){
              if (this.arr.type == 2||this.arr.type == '2'){
                this.$router.push({
                  path:'/demand',
                  query:{
                  id:this.arr.id,
					cid:'',
					y:'',
					type:1,   //课程
					zid:this.tid,
                  url:this.$route.fullPath
                  }
                })
              } else {
                this.$router.push({
                  path:'/demand',
                  query:{
                  id:this.arr.id,
                  y:'',
					cid:'',
					zid:this.tid,
					type:1,   //课程
					zbo:1,
                    url:this.$route.fullPath
                  }
                })
              }
            }else {
				this.axios.get(this.$store.state.url +'Pay/courseOrder',{
					 params:{
						 id:this.arr.id
					 }
				}).then(res=>{
					if(res.data.errcode==0||res.data.errcode=='0'){
						var data = res.data.data;
						var order_id = data.id;
						this.$router.push({
						  path:'/order',
						  query:{
							id:this.arr.id,
								order_id:order_id,
								type:1,
								pay:0,
						  }
						})
					}else{
						layer.open({
							content: res.data.msg,
							skin: 'msg',
							time: 2 //1秒后自动关闭
						});
					}
				})
							
            }
          } else {
			var arr = this.arr;
			if(arr.price==0||arr.price=='0'||arr.price==0.00||arr.price=='0.00'){
				if (this.arr.type == 2){
				  this.$router.push({
					path:'/demand',
					query:{
					  id:this.arr.id,
					  cid:'',
					  y:'',
						type:1,   //课程
						zid:this.tid,
						zbo:1,
					  url:this.$route.fullPath
					}
				  })
				} else {
				  this.$router.push({
					 path:'/demand',
					 query:{
						 id:this.arr.id,
						 cid:'',
						 y:'',
						 type:1,   //课程
						 zid:this.tid,
						 zbo:1,
						 url:this.$route.fullPath
					 }
				  })
				}
			}else{
                this.nologin();
			}
          }
        },
        gun(){
          var  scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          this.top = scrollTop;
        },
		nologin(){
			// console.log(8989)
			$('.shoewr-chenhoupass').fadeIn();
			
		},
		// 点击取消
		repeatclose(){
			$('.shoewr-chenhoupass').fadeOut();
			this.number3=0;
		},
		// 点击去登录
		repeatclick(){
			$('.shoewr-chenhoupass').fadeOut();
			this.number3=0;
			this.d();
		},
		time(){
		  var that = this;
		  var h,m,s,t;
		  var leftTime = this.arr.countdown;
		  var timer = setInterval(function () {
		    leftTime--;
		
		    if (leftTime>=0){
		      h = Math.floor(leftTime/60/60/24);
		      m = Math.floor(leftTime/60/60) - h*24;
		      s = Math.floor(leftTime/60 - h*24*60 - m*60);
		      t = Math.floor(leftTime - s*60 - m*60*60 - h*24*60*60)
		      // console.log(h,m,s)
		      this.h = h;
		      this.m = m;
		      this.s = s;
		      this.t = t;
			  this.chenload=true;
							// console.log(this.h==0)
		    }else {
		      clearInterval(timer);
		      this.t = 0;
		      this.h = 0;
		      this.m = 0;
		      this.s = 0;
			  this.chenload=true;
		    }
		  }.bind(this),1000)
		},
        xq(){
        //    获取课程详情
            this.axios.get(this.$store.state.url + 'LiveCourse/course',{
							params:{
								id:this.id
							},
            }).then(res=>{
				
							if (res.data.errcode == 0||res.data.errcode == '0'){
								var data = res.data.data;
								 this.arr = data;
								 // console.log(data.type)
								 if(data.type==1||data.type=='1'){
									 this.time();
								 }else{
									 this.chenload=true;
								 }
								 
								 
								 
								$('title').html(this.arr.name);
								// var url1 = window.location.href.split(':')[0];
								// var link =url1+ this.$store.state.linkurltap +'/course?id='+ this.$route.query.id+'&zid='+this.tid+'';
								 // var url =url1+ this.$store.state.linkurltap;
								 var url =window.location.href;
								 // console.log(url);
								 // console.log(url)
								 var obj = {
									 title: this.arr.name,		//分享标题
									 desc: this.$store.state.desc,	//分享内容
									 linkurl: url, //分享链接
									 img: this.$store.state.img+this.arr.thumb,
								 }
								this.sdk.getJSSDK(url,obj,this.$store.state.url);
								// this.number3=1
								// console.log(this.number3)
								if(localStorage.getItem('token')){
			// 										
								}else{
									if(sessionStorage.getItem('numbers')){
											var a = sessionStorage.getItem('numbers');
										// console.log(a);
										if (Number(a)>=3){
											this.number3=1
										}else{
											a++;
												sessionStorage.setItem('numbers',a)
										}
									}else{
										sessionStorage.setItem('numbers',1)
									}
									// 
								}
						
							 } 
						})
        },
		loadBottom(){
			this.allLoaded = true;// if all data are loaded
			
			this.page++;
			this.ping(1);
		},
        ping(type){
			var that = this;
			var page = that.page;
			that.axios.get(that.$store.state.url + 'Live/commentList',{
				params:{
					id:that.id,
					type:1,
					page:page,
					limit:20
				},
			}).then(res=>{
				if (res.data.errcode == 0||res.data.errcode == '0'){
					var list = res.data.data.lists;
					
					// that.pinglun = that.pinglun.concat(list);
					if (page == 1||page == '1'){
						that.pinglun = list;
					}else{
						that.pinglun = that.pinglun.concat(list);
					}
					if(list.length<10){
						that.allLoaded = true;
					}else{
						if(type==1||type=='1'){
							that.$refs.loadmoredetail.onBottomLoaded();
							that.allLoaded = false;
						}
					}
					
					
					if (that.pinglun.length>0){
						that.b = false;
					} else {
						that.b = true;
					}
				}
			})

        },

      },
      mounted(){
		  
		  
				$('title').html('');
				var that = this;
						that.loginsuccess();
				// alert(document.cookie.get("tooken"));//获取cookie
						
				that.popupVisible4 = false;
						// $('.shoewr-chenshi').fadeIn();
				// $('.shoewr-chenhoupass').css('display','block');

						//获取评论列表
						that.id=that.$route.query.cid;
				if(that.$route.query.zid){
					that.tid = that.$route.query.zid;
				}
						//获取详情内容
						that.xq();
						that.ping(0);
						//获取相关视频
						that.axios.get(that.$store.state.url + 'LiveCourse/relatedCourse',{
							params:{
								id:that.$route.query.cid
							},

						}).then(res=>{
							// console.log(res.data)
						 if (res.data.errcode == 0){
							 that.recommend = res.data.data
							}
						})
				
				//获取咨询详情
				that.axios.get(that.$store.state.url + 'find/service_info').then(res=>{
					// console.log(res.data)
				 if (res.data.errcode == 0||res.data.errcode == '0'){
					 that.serviceinfo = res.data.data;
		// 		   var data = OpenInstall.parseUrlParams();
		// 		   new OpenInstall({
		// 		    // appKey : "moblge",  //测试
		// 		    appKey : "zngvis",   //正式
		// 		   	//channelCode:"渠道编号",
		// 		   	// preferWakeup:false,
		// 		       onready : function() {
		// 		        var m = this; 
		// 		   	    var button = document.getElementById("downloadButton");
		// 		   	    // console.log(button);
		// 		        button.style.visibility = "visible";
		// 		   		// $('#downloadButton').css('visibility','visible')
		// 		           m.schemeWakeup();
		// 		           button.onclick = function() { 
		// 		   			// console.log(8989);
		// 		               m.wakeupOrInstall();
		// 		               return false;
		// 		           };
		// 		       }
		// 		   }, data);
					}
				})
				
        //监听上滚动，下滚动

        window.addEventListener('scroll', that.gun)
       

      },
      watch:{
          top(newName, oldName){
            if (newName > oldName){
              this.fix = false;
            } else {
              this.fix = true;
            }
          },
//           $route(to,from){
//          // console.log(to.path);
//           }
      }
    }
</script>

<style scoped>
	.intruclass{
		width:6.9rem;
		margin: auto;
		/*height: 1.94rem;*/
		padding-bottom: 0.2rem;
		overflow: hidden;
		border-bottom: 0.01rem solid rgba(237,237,237,1);
		display: flex;
			/* justify-content: space-between; */
		flex-wrap: wrap;
		align-items: center;
	}
	.intru{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.zbotime{
		width: 100%;
	}
	.time{
	    width: 100%;
	    color: #FF0214;
	    margin-top: 0.3rem;
		display: flex;
		justify-content: space-between;
	  }
	.time span:nth-child(1){
	  font-size:0.24rem;
	  color:rgba(51,51,51,1);
	  line-height:0.32rem;
	  /* margin-right: 0.16rem; */
	}
	.timered{
	  display: inline-block;
	  padding: 0 0.1rem 0 0.1rem;
	  height: 0.36rem;
	  line-height: 0.36rem;
	  color: #fff;
	  background-color: #FF0214;
	  text-align: center;
	  border-radius:0.1rem;
	  font-size: .24rem;
	}
	.timecolor{
		color:#FF0214 !important;
		font-weight: 600;
	}
	.time .timekai{
	  font-size:0.24rem;
	  color:rgba(51,51,51,1);
	  line-height:0.32rem;
	  text-align: right;
	}
	#downloadButton{
		width: 100%;
		position: fixed;
		top: 0;
		line-height: .88rem;
		top: 0;
		background: rgba(0,0,0,.5);
		text-align: center;
		color: #fff;
	}
  >>>.van-hairline--top-bottom::after{
    border-width: 0 0;
  }
  >>>.van-tabs__wrap{
    box-shadow:0 3px 5px 0 rgba(71,68,80,0.06);
  }
  .url{
    width: 6.5rem;
    height: 0.5rem;
    margin:0.5rem auto 0;
    border-radius:0.24rem;
    background:rgba(247,247,247,1);
    padding: 0.1rem 0.27rem 0.1rem 0.27rem;
    overflow: hidden;/*超出部分隐藏*/
    white-space: nowrap;/*不换行*/
    text-overflow:ellipsis;/*超出部分文字以...显示*/
  }
  .fuzhi{
    width:3.3rem;
    height:0.7rem;
    background:rgba(2,135,255,1);
    border-radius:0.35rem;
    font-size: 0.28rem;
    font-weight: bold;
    margin-top: 0.5rem;
    outline: none;
    border: none;
    color: #fff;
  }
  .huo1{
    width: 100%;
    height: 0.5rem;
    background:rgba(252,229,211,1);
    margin-top: 0.2rem;
    color:rgba(226,47,58,1);
  }
  .tuiguang{
    width: 1rem;
    height: 1rem;
    position: fixed;
    right: 0.2rem;
    bottom: 2.7rem;
    text-align: center;
    z-index: 101;
  }
    .goback{
      width: 1rem;
      height: 1rem;
      position: fixed;
      right: 0.2rem;
      bottom: 1.5rem;
      z-index: 101;
    }
    .img{
      /* width: 100%; */
			width: 7.5rem;
			height: 4.25rem;
    }
  .intru{
    /* width:83%; */
    /*margin: auto;*/
    /*height: 1.94rem;*/
    display: inline-block;
    padding-bottom: 0.2rem;
    overflow: hidden;
    
  }
	.m1{
	  width: 83%;
		padding-right: .3rem;
	}
	.m1name{
	  width: 100%;
	}
  .dianhua{
    height: 100%;
    float: right;
    text-align: center;
    float: right;
    margin-left: 0.3rem;
    margin-bottom: 0.1rem;
		border-left: 1px solid #EDEDED;
		padding-left: .3rem;
  }
  .dianhua img{
    width: 0.34rem;
		height:.46rem;
  }
  .dianhua p{
    font-size:0.2rem;
    font-weight:500;
    color:rgba(2,135,255,1);
  }
  .intru p:nth-child(1){
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    margin-top: 0.2rem;
  }
    .price{
      margin-top: 0.2rem;
    }
    .price span{
      /*font-size: 0.24rem;*/

      line-height: 0.22rem;
    }
    .price span:nth-child(1){
      color: #C2C9D3;
    }
    .price span:nth-child(3){
      text-decoration:line-through;
      float: right;
      color: #C2C9D3;
      margin-right: 0.2rem;
    }
    .a{
      font-size: 0.3rem;
      font-weight:bold;
      color:rgba(255,2,20,1);
      float: right;
    }
    .a1{
      font-size: 0.3rem;
      font-weight:bold;
      color:#0287FF;
      float: right;
    }
  .d{
    width: 100%;
    height: 1.2rem;
  }
  .msg{
    height: 0.8rem;
    float: left;
    margin-top: 0.2rem;
    margin-left: 0.2rem;
  }
  .msg img{
    width: 0.8rem;
    height: 100%;
    border-radius: 50%;
    float: left;
  }

  .msg div{
    margin-left: 1rem;
    font-size: 0.28rem;
    line-height:0.32rem;
  }
  .msg div p:nth-child(2){
    margin-top: 0.1rem;
    font-size:0.24rem;
    color:rgba(194,201,211,1);
  }
    .btoBlue{
      width:1rem;
      height:0.44rem;
      background:rgba(2,135,255,1);
      border-radius:0.22rem;
      color: #fff;
      font-size:0.24rem;
      border: none;
      float: right;
      margin-top: 0.4rem;
      margin-right: 0.3rem;
    }
    .btoGray{
      width:1rem;
      height:0.44rem;
      background:rgba(240,240,240,1);
      border-radius:0.22rem;
      color: #999999;
      font-size:0.24rem;
      border: none;
      float: right;
      margin-top: 0.4rem;
      margin-right: 0.3rem;
    }
  .v{
    width: 100%;
    background: #fff;
    box-sizing:border-box;
    padding: 0.3rem 0.3rem 0.3rem 0.3rem;
  }
  .span1{
    display: inline-block;
    width:0.04rem;
    height:0.28rem;
    background:rgba(2,135,255,1);
    /*vertical-align: middle;*/
  }
  .span2{
    margin-left: 0.1rem;
    font-size:0.28rem;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    vertical-align: top;
  }
  .ht{
    margin-top: 0.3rem;
  }
    .ht>>>img{
      width: 100%!important;
    }
    .ht>>>table{
      display: block;
      width: 100%!important;
    }
    .ht>>>span{
      white-space: normal!important;
    }
    .ya{
      height: 1.18rem;
      margin-top: 0.3rem;
      position: relative;
    }
    .img2{
      width: 2.1rem;
      height: 100%;
      float: left;
      border-radius:0.08rem;
    }
    .ya div{
      height: 100%;
      margin-left: 2.3rem;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
    }
    .ya div p:nth-child(1){
      width: 4.6rem;
      font-size:0.28rem;
      color:rgba(51,51,51,1);
      line-height:0.32rem;
    }
    .img1{
      width: 0.3rem;
      height: 0.3rem;
    }
    .p1{
      width: 100%;
    }
    .p1 span{
      /*font-size:0.24rem;*/
      /*color:rgba(194,201,211,1);*/
      line-height:0.32rem;
    }
    .p1 span:nth-child(4){
      font-size:0.24rem;
      color:rgba(194,201,211,1);
      text-decoration:line-through;
      line-height:0.32rem;
      float: right;
      margin-right: 0.2rem;
    }
	.v{
	  width: 100%;
	  margin-top: 0.2rem;
	  background: #fff;
	  box-sizing:border-box;
	  padding: 0.3rem 0.3rem 0.3rem 0.3rem;
		overflow: hidden;
	}
	.span1{
	  display: inline-block;
	  width:0.04rem;
	  height:0.28rem;
	  background:rgba(2,135,255,1);
	  /*vertical-align: middle;*/
	}
	.span2{
	  margin-left: 0.1rem;
	  font-size:0.28rem;
	  font-weight:bold;
	  color:rgba(51,51,51,1);
	  line-height:0.32rem;
	  vertical-align: top;
	}
	.ht{
	  margin-top: 0.3rem;
	}
	.ht>>>img{
	 width: 100%!important;
	}
	.ht>>>table{
	    display: block;
	    width: 100%!important;
	  }
	.ht>>>span{
	    white-space: normal!important;
	  }
	  .ya{
	    height: 1.18rem;
	    margin-top: 0.3rem;
	    position: relative;
	  }
	  .img2{
	    width: 2.1rem;
	    height: 100%;
	    float: left;
	    border-radius:0.08rem;
	  }
	  .ya div{
	    height: 100%;
	    margin-left: 2.3rem;
	    display: flex;
	    flex-wrap: wrap;
	    align-content: space-between;
	  }
	  .ya div p:nth-child(1){
	    width: 4.6rem;
	    font-size:0.28rem;
	    color:rgba(51,51,51,1);
	    line-height:0.32rem;
	  }
	  .img1{
	    width: 0.3rem;
	    height: 0.3rem;
	  }
	  .p1{
	    width: 100%;
	  }
	  .p1 span{
	    /*font-size:0.24rem;*/
	    /*color:rgba(194,201,211,1);*/
	    line-height:0.32rem;
	  }
	  .p1 span:nth-child(4){
	    font-size:0.24rem;
	    color:rgba(194,201,211,1);
	    text-decoration:line-through;
	    line-height:0.32rem;
	    float: right;
	    margin-right: 0.2rem;
	  }
  .fix{
    width: 7.5rem;
    height: 0.88rem;
    background: #fff;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .fix img{
    width: 0.4rem;
    height: 0.4rem;
  }
  .fix div{
    text-align: center;
  }
  .fix button{
    border: none;
    width:3.3rem;
    height:0.7rem;
    background:rgba(2,135,255,1);
    border-radius:0.35rem;
    font-size:0.28rem;
    font-weight:bold;
    color:rgba(255,255,255,1);
  }
  .pop{
    width: 92%;
    height: 6.22rem;
    margin: auto;
    background:rgba(255,255,255,1);
    margin-top: 1.7rem;
    overflow: hidden
  }
  .popImg{
    width: 0.66rem;
    margin-top: 0.5rem;
  }
  .verify{
    font-size:0.36rem;
    font-weight:bold;
    color:rgba(51,51,51,1);
    text-align: center;
    margin-top: 0.8rem;
  }
  /*tanchuang*/


    .tel{
      width: 100%;
      border-bottom: 0.02rem solid rgba(237,237,237,1);
      display: flex;
      align-items: center;

    }
    .tel_img{
      width: 0.38rem;
      height: 0.44rem;
    }
    .tel_img img{
      width: 100%;
      height: 100%;
    }
    .tel_input{
      width: 60%;
      height: 0.8rem;
      margin-left: 0.2rem;
    }
    .tel_input input::placeholder{
      font-size: 0.3rem;
      line-height: 0.5rem;
    }
    .tel_input input{
      height: 100%;
      border: none;
      outline: none;
    }
    .tel button{
      width:2.4rem;
      height:0.76rem;
      background:rgba(255,255,255,1);
      border:0.02rem solid rgba(2,135,255,1);
      border-radius:0.38rem;
      margin-bottom: 0.1rem;
      color: rgba(2,135,255,1);
      font-size: 0.3rem;
    }
  .last{
    width: 100%;
    height:0.88rem;
    background:linear-gradient(90deg,rgba(2,135,255,1),rgba(2,157,255,1));
    box-shadow:0 0 0.1rem 0 rgba(2,109,255,0.6);
    border-radius:0.44rem;
    font-size:0.36rem;
    color:rgba(255,255,255,1);
    line-height:0.46rem;
    margin-top: 0.8rem;
    border: none;
    outline: none;
  }
  .r{
    background: #fff;
    padding-bottom: 0.2rem;
    overflow: hidden;
  }
  .doctor{
    width: 92%;
    margin: auto;
    margin-top: 0.3rem;
  }
  .docImg{
    width: 0.54rem;
    height: 0.54rem;
    border-radius: 50%;
    vertical-align: top;
  }
  .content{
    width: 87%;
    display: inline-block;
    margin-left: 0.2rem;
  }
  .content p:nth-child(1){
    font-size: 0.24rem;
    color:rgba(51,51,51,1);
  }
  .content p:nth-child(2){
    color: #C2C9D3;
    font-size: 0.24rem;
    line-height: 0.32rem;
  }
  .content p:nth-child(3){
    font-size: 0.24rem;
    color: #333;
    margin-top: 0.2rem;
    line-height: 0.32rem;
	word-wrap:break-word;
  }
  .content p:nth-child(4){
    margin-top: 0.15rem;
    float: right;
  }
  .content p:nth-child(4) img{
    width: 0.27rem;
    vertical-align: middle;
  }
  .bluezan{
    font-size:0.22rem;
    color:rgba(2,135,255,1);
    line-height:0.19rem;
    vertical-align: middle;
  }
  .grayzan{
    font-size:0.22rem;
    color:#C2C9D3;
    line-height:0.19rem;
    vertical-align: middle;
  }
  .button3{
    border: none;
    width: 3.3rem;
    height: 0.7rem;
 background-color: rgb(153, 153, 153);
    border-radius: 0.35rem;
    font-size: 0.28rem;
    font-weight: bold;
    color: rgba(255,255,255,1);
	display: block;
	text-align: center;
	line-height: 0.7rem
  }
</style>
